<template>
  <div class="content-wrapper">
    <template>
      <template v-if="!tplId">
        <h2>请先选择模版</h2>
      </template>
      <template v-else>
        <c-box :title="name + ' - 设备子系列列表'">
          <el-button slot="func" type="primary" size="small" @click="showAddDlg">添加设备子系列</el-button>
          <el-table ref="table" :data="tplChildren" style="width: 100%">
            <el-table-column prop="devtempserialname" label="系列名" />
            <el-table-column prop="name" label="类型">
              <template slot-scope="{row}">{{ row.devtempserialtype === '1' ? '通用设备' : 'Modbus设备' }}</template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="{row}">
                <el-button
                  type="text"
                  size="small"
                  @click="$router.push('/template/' + row.devtempserialid + '/dataarea?name=' + row.devtempserialname)"
                >查看数据区</el-button>
                <el-button type="text" size="small" @click="showEditDlg(row)">编辑</el-button>
                <!-- <el-button type="text" size="small">查看</el-button> -->
                <!-- <el-button type="text" size="small" @click="deleteChild(row)">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              layout="prev, pager, next"
              :total="page.total"
              :current-page="page.index"
              @current-change="pageChange"
            />
          </div>
        </c-box>
      </template>
      <c-dialog
        :visible.sync="showDlg"
        :title="(newChild.devtempserialid ? '修改' : '添加')+'设备子系列'"
        @close="showDlg = false"
      >
        <el-form :model="newChild" label-width="60px" label-position="top">
          <div class="form-row">
            <div class="row-item">
              <el-form-item label="设备类型" prop="devtempserialtype">
                <el-radio v-model="newChild.devtempserialtype" label="1">通用设备</el-radio>
                <el-radio v-model="newChild.devtempserialtype" label="2">Modbus设备</el-radio>
              </el-form-item>
            </div>
          </div>
          <div class="form-row">
            <div class="row-item">
              <el-form-item label="设备系列名称" prop="devtempserialname">
                <el-input v-model="newChild.devtempserialname" size="mini" placeholder="请输入名称" />
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer">
          <el-button type="danger" size="small" @click="editChild">确定</el-button>
          <el-button size="small" @click="showDlg = false">取消</el-button>
        </div>
      </c-dialog>
    </template>
  </div>
</template>

<script>
import CBox from "@/components/CCard";
import CDialog from "@/components/CDlg";
import { clone } from "lodash";
import { calcPageNum } from "@/utils";
export default {
  components: {
    CBox,
    CDialog
  },
  props: {
    tplId: {
      type: Number,
      default: null
    },
    name: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      page: {
        index: 1,
        size: 10,
        total: 0,
        isInit: true
      },
      showDlg: false,
      loading: true,
      tplChildren: null,
      newChild: {}
    };
  },
  watch: {
    tplId: {
      immediate: true,
      handler: function(v) {
        if (this.page.isInit && v) {
          this.$nextTick(() => {
            const h = this.$refs["table"].$el.clientHeight;
            const n = calcPageNum(h);
            this.$set(this.page, "size", n);
            v && this.getChildren();
          });
        } else {
          v && this.getChildren();
        }
      }
    }
  },
  methods: {
    getChildren() {
      const params = {
        page: this.page.index,
        rows: this.page.size,
        devtempid: this.tplId
      };
      return this.$axios
        .get("fes/device/getDevZxl", {
          params
        })
        .then(res => {
          if (res.code === 1) {
            this.$set(this.page, "total", res.data.total);
            this.tplChildren = res.data.rows;
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e))
        .finally(() => (this.loading = false));
    },
    pageChange(index) {
      this.$set(this.page, "index", index);
      this.getChildren();
    },
    showAddDlg() {
      if (!this.tplId) return;
      if (this.newChild.devtempserialid) {
        this.newChild = {
          devtempid: this.tplId
        };
      } else {
        this.$set(this.newChild, "devtempid", this.tplId);
      }
      this.showDlg = true;
    },
    showEditDlg(c) {
      this.newChild = clone(c);
      this.showDlg = true;
    },
    editChild() {
      return this.$axios
        .post("fes/device/saveDevZxl", this.newChild)
        .then(res => {
          if (res.code === 1) {
            this.getChildren();
            this.showDlg = false;
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e));
    }
    // deleteChild(c) {
    //   console.log(c);
    //   this.$confirm("此操作将永久删除该设备子系列, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   }).then(() => {
    //     this.$message.error("无接口");
    //     // this.$axios
    //     //   .post("api/fes/device/devgroupRemove", { pkid: id })
    //     //   .then(res => {
    //     //     if (res.code === 1) {
    //     //       this.grounps = this.grounps.filter(g => g.pkid !== id);
    //     //     } else {
    //     //       throw res.msg;
    //     //     }
    //     //   })
    //     //   .catch(e => this.$message.error(e));
    //   });
    // },
  }
};
</script>

<style lang="scss" scoped>
.content-wrapper {
  flex-grow: 1;
  overflow: auto;
  .in-out {
    text-align: left;
    margin-bottom: 24px;
    button {
      margin-right: 40px;
    }
  }
  .wrapper {
    padding: 24px;
  }
}
.data-detail {
  margin: 0 30px;
  .top {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #666;
    text-align: left;
    label {
      margin-left: 0;
    }
    .func1 {
      display: flex;
      justify-content: space-between;
      .item {
        margin-left: 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover {
          color: #aaa;
        }
        img {
          margin-right: 2px;
          transform: scale(0.7);
        }
        &:nth-child(1) {
          margin-left: 0;
        }
      }
    }
  }
  .btm {
    text-align: left;
    .input-row {
      label {
        margin-left: 0;
        width: 140px;
      }
    }
  }
}
</style>
